<!DOCTYPE html>
<html lang="zh-cn">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <link rel="stylesheet" type="text/css" href="lib/leaflet/leaflet.css"/>
  <link rel="stylesheet" type="text/css" href="lib/plugins/leaflet.marker.highlight.css"/>
  <link rel="stylesheet" type="text/css" href="css/map.css"/>
  <script src="lib/leaflet/leaflet.js"></script>
  <script src="lib/plugins/leaflet.ChineseTmsProviders.js"></script>
  <script src="lib/plugins/leaflet.marker.highlight.js"></script>
  <script src="lib/plugins/leaflet-tilelayer-wmts-src.js"></script>
  <script src='https://api.tiles.mapbox.com/mapbox-gl-js/v1.3.1/mapbox-gl.js'></script>
  <link href='https://api.tiles.mapbox.com/mapbox-gl-js/v1.3.1/mapbox-gl.css' rel='stylesheet'/>
  <script src="lib/plugins/leaflet-mapbox-gl.js"></script>


  <title>用leaflet-mapbox加载</title>
</head>
<body>
<div id="map"></div>
<script src="js/createMap.js"></script>
<script src="js/common.js"></script>
<script src="js/interface.js"></script>
<!--<script src="lib/jquery.js"></script>-->
<script>
  switchBaseLayer("谷歌","卫星图");

  var token = 'eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJzdWIiOiJhZG1pbiIsImNvbnRleHRVc2VySWQiOiIwIiwiY29udGV4dE5hbWUiOiLlhpzkuJrlnLDnkIblpKfmlbDmja7lubPlj7DotoXnuqfnrqHnkIblkZgiLCJjb250ZXh0RGVwdElkIjoiMSIsImNvbnRleHRBcHBsaWNhdGlvbklkIjoiMCIsImlhdCI6MTU2ODk2NjU5NywiZXhwIjoxNTk0ODg2NTk3fQ.ActZyp0VaG-Ntm0y3CAhblbc2GMKDlY0inT9KtWsalY';
  var gl = L.mapboxGL({
    accessToken: 'pk.eyJ1IjoiZ2lzY2xqMjAwNCIsImEiOiJjamV5MnphdmYxanM1MzJwczR2bTk3OXY0In0.s7oaQEal5Xj5uZLzGLLeIQ',
    style: 'style/style.json',
    center: [112.0754814, 32.73563140],
    zoom: 15,
    transformRequest: function(url, resourceType) {
      if (url.includes('mse.gykj.com.cn')) {
        return {
          url: url,
          headers: {'Authorization': token}
        };
      } else {
        return {
          url: url
        };
      }
    }
  }).addTo(map);

  var mapboxMap = gl.getMapboxMap();

  mapboxMap.on('style.load', function() {
    //添加高亮图层
    mapboxMap.addLayer({
      'id': '种植地块高亮',
      'source': 'dt_zzdk',
      'type': 'line',
      'minzoom': 1,
      'maxzoom': 23,
      'layout': {
        'visibility': 'visible'
      },
      'paint': {
        'line-color': '#00ffff',
        'line-width': 5
      },
      'source-layer': 'dt_zzdk',
      'metadata': {
        'mapbox:group': '04687df45bbae'
      },
      'visibility': 'visible',
      'filter': [
        'in',
        'objectid',
        ''
      ]
    });

    map.addEventListener("click", function(e) {
      var bbox = [[e.latlng.lng,e.latlng.lat], [e.latlng.lng,e.latlng.lat]];
      var features = mapboxMap.queryRenderedFeatures(bbox, {layers: ['种植地块']});
      if (features.length > 0) {
        var filter = features.reduce(function(memo, feature) {
          memo.push(feature.properties.objectid);
          return memo;
        }, ['in', 'objectid']);
        var coordinates = features[0].geometry.coordinates[0];
        var lngMin = coordinates[0][0];
        var lngMax = coordinates[0][0];
        var latMin = coordinates[0][1];
        var latMax = coordinates[0][1];
        for (var i = 1; i < coordinates.length; i++) {
          if (lngMin > coordinates[i][0]) {
            lngMin = coordinates[i][0];
          } else if (lngMax < coordinates[i][0]) {
            lngMax = coordinates[i][0];
          }
          if (latMin > coordinates[i][1]) {
            latMin = coordinates[i][1];
          } else if (lngMax < coordinates[i][1]) {
            latMax = coordinates[i][1];
          }
        }

        mapboxMap.fitBounds(new mapboxgl.LngLatBounds([lngMin, latMin], [lngMax, latMax]), {
          padding: 60
        });


        // that.id = features[0].properties.objectid;
        console.log(features[0].properties);
        // that.qhmc = features[0].properties.qhmc;
        // that.zwmc = features[0].properties.zwmc;
        mapboxMap.setFilter('种植地块高亮', filter);
      }
    });
    mapboxMap.on('mousemove', '种植地块', function(e) {
      console.log(e);
    })

  });
</script>

</body>
</html>